<template>
    <div>
        <el-container>
            <el-header class="homeHeader">
                <div class="headerTitle">环境辐射值监测系统</div>
                <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link headerFont">
                  {{this.getTimeStage}}，{{ this.loginInfo.userName }}
                </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-user" command="personalCenter">个人中心</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-switch-button" command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-container>
                <el-aside style="transition: all 0.5s" :width="menuCollapse?'65px':'200px'">
                    <el-menu router unique-opened :default-active="$route.path" ref="menu" :collapse="menuCollapse">
                        <el-menu-item v-for="(item,index) in getMenu" :index="item.path" :key="index" v-if="item.meta.menuItem">
                            <i :class="item.icon"></i>
                            <span>{{item.name}}</span>
                        </el-menu-item>
                        <el-submenu v-for="(item,index) in getMenu" :index="index+''" :key="index" v-if="!item.meta.menuItem" >
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span>{{ item.name }}</span>
                            </template>
                            <el-menu-item v-for="(children,index) in item.children" :key="children.path"
                                          v-if="(!children.meta.senior)||loginInfo.levelId===1"
                                          :index="children.path">
                                <i :class="children.icon"></i>
                                {{ children.name }}
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main :style="defaultHeight">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/manage/radiation' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <router-view class="homeRouterView" ref="view" />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'

export default {
    name: "Home",
    data() {
        return {
            defaultHeight: {
                height: ""
            },
            windowWidth: document.documentElement.clientWidth,
            menuCollapse: false
        }
    },
    methods: {
        ...mapActions([
            'updateLoginInfo',
            'initRecords'
        ]),
        getHeight() {
            //设定main的高度
            this.defaultHeight.height = window.innerHeight - 60;
            //设定routerView的高度
            if(this.$refs.view){
                this.$refs.view.$el.style.height = this.defaultHeight.height - (40 + 14 + 30) + "px";
            }
        },
        handleCommand(command) {
            if (command === 'personalCenter') {
                this.$router.push('/setting/me');
            } else if (command === 'logout') {
                this.$confirm('确定要退出登录吗?', '警告', {
                        confirmButtonText: '退出登录',
                        cancelButtonText: '返回',
                        type: 'warning',
                    }
                ).then(() => {
                    // this.postRequest('/api/logout', null).then(resp => {
                    this.postRequest('/logout', null).then(resp => {
                        if (resp) {
                            window.sessionStorage.removeItem('tokenStr');
                            window.sessionStorage.removeItem('loginInfo');
                            this.updateLoginInfo({});
                            this.$router.replace('/login');
                        }
                    })
                }).catch(() => {
                    this.$message.info("取消登录操作");
                })
            }
        }
    },
    computed: {
        ...mapState({
            loginInfo: state => state.static.loginInfo
        }),
        getMenu() {
            let routes = this.$router.options.routes;
            for (let item in routes) {
                if (routes[item].name==="Home") {
                    return routes[item].children;
                }
            }
        },
        getTimeStage(){
            let hour = new Date().getHours();
            if(6 < hour && hour <= 12){
                return "早上好"
            }else if(12 < hour &&hour <= 14){
                return "中午好"
            }else if(14 < hour &&hour <= 18){
                return "下午好"
            }else{
                return "晚上好"
            }
        }
    },
    created() {
        //创建好后执行一次高度计算,绑定resize事件
        window.addEventListener("resize", this.getHeight);
        this.getHeight();

        //更新loginInfo到Vuex
        if (undefined === this.loginInfo.userName) {
            this.updateLoginInfo(JSON.parse(window.sessionStorage.getItem("loginInfo")));
        }
    },
    mounted() {
        //主页生成之初边获取近期各表的操作记录数据
        this.initRecords();
        //绑定resize事件
        let _this = this;
        window.onresize = () => {
            return (() => {
                _this.windowWidth = document.documentElement.clientWidth;
            })()
        };
    },
    watch: {
        windowWidth(newValue,oldValue){
            if(newValue <= 992){
                if(!this.menuCollapse){
                    this.menuCollapse = true;
                }
            }else{
                if(this.menuCollapse){
                    this.menuCollapse = false;
                }
            }
        }
    }
}
</script>

<style scoped>
.homeHeader {
    background: #40a9ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
}

.homeHeader .headerTitle {
    font-size: 30px;
    font-family: 华光楷体_CNKI;
    color: #FFFFFF;
}

.homeHeader .headerFont {
    color: #FFFFFF;
    font-size: 20px;
    font-family: 华光楷体_CNKI;
    cursor: pointer;
}

@media screen and (max-width: 500px){
    .homeHeader .headerTitle {
        font-size: 24px;
        font-family: 华光楷体_CNKI;
        color: #FFFFFF;
    }

    .homeHeader .headerFont {
        color: #FFFFFF;
        font-size: 18px;
        font-family: 华光楷体_CNKI;
        cursor: pointer;
    }
}

.homeRouterView{
    margin-top: 10px;
}

.img-profile{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0px 0px 10px 4px #00000033, 0 16px 20px 2px #00000024, 20px 3px 20px 0px #0000001f;
}
</style>